<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE HTML>
<html>
<head>
<title>My Story</title>

<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css">
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>

<script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.1.0.min.js"> </script>
<script type="text/javascript" src="jquery.fullbg.js"></script>

<STYLE>
body, input{
	font-family: Calibri, Arial;
}
.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
}
#sometext {
	width: 150px;
	height: 150px;
	padding: 10px;
	border:1px solid black;
	background-color: #FFEE88;
}
#maincontent {
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	opacity: 0.9; 
	filter: alpha(opacity=90);
	}
	#mys_options {
	position: absolute;
	top: 300px;
	left: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	opacity: 0.9; 
	filter: alpha(opacity=90);
	}
</STYLE>
</head>
<body>
<img src="bg.jpg" alt="" id="background" />
	<script type="text/javascript">
	 $(document).ready(function(){
		 $("#dialogLoad").click(function () {
				 $.ajax({
			    url: 'http://10.84.5.134:8080/mestory/rest/get',
			    type: 'GET',
			    dataType: "xml",
			    data: '', 
			    success: function(xml) {
					$story = $(xml).find('story');
					//alert($story.find("name").text());
					$("#dialogStoryContent").html("<p>" + $story.find("name").text() + "</p>");
					},
				 error: function(xhr, ajaxOptions, thrownError) {
						$("#dialogStoryContent").append("<p>Error: " + xhr.status + "," + thrownError + "</p>");
						}
				}); 
			 });
		 $("#background").fullBg();
		 $("#schafkopf").click(function () {
			 $("#sometext").fadeOut('slow');
			 //$("#sometext").fadeIn('slow');
		 }); 
	 });
 </script>

			
	<div data-role="page" id="mys_options">
		<div data-role="header">
			<h1>My Story</h1>
		</div>
		<div data-role="content">
			<h3>Options</h3>
			<p>
				<a href="#dialog" data-rel="dialog" data-transition="pop"
					data-role="button">Select Story </a>
			</p>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#mys_options" data-iconpos="top" data-icon="home">Options
					</a></li>
					<li><a href="#mys_story" data-iconpos="top" data-icon="home">Story
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="mys_story">
		<div data-role="header">
			<h1>My Story</h1>
		</div>
		<div data-role="content">
			<h3>Story 1</h3>
		</div>
<!-- 		<div id="maincontent"> -->
<!-- 			<img src="schafkopf.gif" alt="" id="schafkopf" /> -->
<!-- 			<div id="sometext"> -->
<!-- 			    This text will Fade In and Out. -->
<!-- 			</div> -->
<!-- 			</div> -->
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#mys_options" data-iconpos="top" data-icon="home">Options
					</a></li>
					<li><a href="#mys_story" data-iconpos="top" data-icon="home">Story
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="dialog">
		<div data-role="header">
			<h2>Select Story</h2>
		</div>
		<div data-role="content" id="dialogStoryContent">
	
		</div>
		<div data-role="content">
			<div  data-rel="back" data-role="button" id="dialogLoad">Load</div >
			<a href="#mys_options" data-rel="back" data-role="button">Close </a>
		</div>
	</div>

</body>
</html>